<template>
<!-- 居中 -->
<span style="font-size: 24px; font-weight:250; margin-bottom: 10px; display: flex; justify-content: center; align-items: center">物料清单</span>
<el-form :model="form" label-width="auto" style="justify-content: center; align-items: center">
    <table>
        <tr>
            <td colspan="3" style="text-align:left">
                <span >基本信息</span>
            </td>
        </tr>
        <tr>
            <td> 
    <el-form-item label=" 物料清单主题">
      <el-input v-model="form.addDtos.mSubject" />
    </el-form-item></td>
            <td> <el-form-item label=" 物料清单编号">
      <el-input  v-model="form.addDtos.mNumber" disabled/>
    </el-form-item></td>
            <td> <el-form-item label=" 制表人员">
      <el-input v-model="form.addDtos.mWatchmakers"/>
    </el-form-item></td>
        </tr>
        <tr>
            <td colspan="3"> 
                <el-form-item label="备注" >
      <el-input v-model="form.addDtos.mRemark"  />
    </el-form-item></td>
        </tr>
    </table>
     <table>
        <tr>
            <td colspan="3" style="text-align:left">
                <span >父件信息</span>
            </td>
        </tr>
        <tr>
            <td> 
    <el-form-item label=" 产品名称">
      <el-input v-model="form.addDtos.mpName" placeholder="双击选择产品名称"  @dblclick="dialogVisible3 = true"   />
    </el-form-item></td>
            <td> <el-form-item label=" 产品编码">
      <el-input  v-model="form.addDtos.mpNumber" />
    </el-form-item></td>
            <td> <el-form-item label=" 规格型号">
      <el-input v-model="form.addDtos.mpSpec"/>
    </el-form-item></td>
    <td> <el-form-item label="单位">
      <el-input v-model="form.addDtos.mpUnit"/>
    </el-form-item></td>
        </tr>
        <tr>
            <td> 
    <el-form-item label=" 数量">
      <el-input v-model="form.addDtos.mQuantity" />
    </el-form-item></td>
            <td> 
  <el-form-item label=" 产品角色">
    <el-select v-model="form.addDtos.mProductPersonas" placeholder="please select your zone">
        <el-option label="请选择" :value="0" />
        <el-option label="自制" :value="1" />
        <el-option label="委外" :value="2" />
      </el-select>   
    
    </el-form-item></td>
            <td> <el-form-item label=" 工艺流程">
      <el-select v-model="form.addDtos.mProcess" placeholder="选择流程"  >
        <el-option label="请选择" value="0" />
        <el-option label="汽车生产工艺流程" value="汽车生产工艺流程" />
        <el-option label="电脑工艺流程" value="电脑工艺流程" />
        <el-option label="面包饼干工艺流程" value="面包饼干工艺流程" />
      </el-select>  
    </el-form-item>



</td>
    <td> <el-form-item label=" 耗损率">
      <el-input v-model="form.addDtos.mWearRate"/>
    </el-form-item></td>
        </tr>
     </table>

       <!-- 产品名称 -->
        <el-dialog v-model="dialogVisible3" title="产品名称选择" width="1000" style="height: 700px;"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-row>
                    <el-col :span="4">
                        <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps"
                            default-expand-all="true" />
                    </el-col>
                    <el-col :span="20">
                        <el-table :data="tableData" border style="width: 100%"
                        highlight-current-row  @current-change="handleCurrentChange" >
                            <el-table-column prop="pName" label="产品名称" align="center" />
                            <el-table-column prop="pNumber" label="产品编号" align="center" />
                            <el-table-column prop="pUnit" label="规格型号" align="center" />
                        </el-table>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="dialogVisible3 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>

        <el-dialog v-model="dialogVisible4" title="产品名称选择" width="1000" style="height: 700px;"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-row>
                    <el-col :span="4">
                        <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps"
                            default-expand-all="true" />
                    </el-col>
                    <el-col :span="20">
                        <el-table :data="tableData" border style="width: 100%"
                        highlight-current-row @selection-change="handleSelectionChange1">
                         <el-table-column type="selection" width="55" />
                            <el-table-column prop="pName" label="产品名称" align="center" />
                            <el-table-column prop="pNumber" label="产品编号" align="center" />
                            <el-table-column prop="pUnit" label="规格型号" align="center" />
                        </el-table>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="dialogVisible4 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>
     <div style="height: 50px;">
            <el-button round @click="addhang()">新增行</el-button>
        </div>
     <!-- 产品表格 -->
      <table border="1" style="border-collapse: collapse; width: 1000px; height: 40px;">
            <thead>
                <tr>
                    
                    <th style="text-align: center;">序号</th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >产品名称</span></th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >产品编号</span></th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >规格型号</span></th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >单位    </span></th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >产品比例</span></th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >数量    </span></th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >产品角色</span></th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >工艺流程</span> </th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >耗损率(%)</span></th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >领料方式</span>  </th>
                    <th><span style="height: 40px; width: 100px;text-align: center;" >备注    </span> </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in check1" :key="index">
                    <td style=" text-align: center;">{{ index + 1 }}</td>
                   
                    <td>
                        <input v-model="item.pName" type="text" placeholder="双击选择产品名称"
                            style="height: 40px; width: 100px;text-align: center;"   @dblclick="dialogVisible4 = true"/>
                    </td>
                    <td>
                        <input v-model="item.pNumber" type="text"
                            style="height: 40px; width: 100px;text-align: center;" />
                    </td>
                    <td>
                        <input v-model="item.pSpec" type="text"
                            style="height: 40px; width: 100px;text-align: center;" />
                    </td>
                    <td>
                        <input v-model="item.pUnit" type="text"
                            style="height: 40px;width: 100px;text-align: center;" />
                    </td>
                    <td>
                        <input v-model="item.productRatio" type="text"
                            style="height: 40px;width: 100px;text-align: center;" />
                    </td>
                    <td>
                        <input v-model="item.iNumber" type="text"
                        style="height: 40px;width: 100px;text-align: center;" />
                           
                    </td>
                    <td>
                 <el-select v-model="item.iProductPersonas" placeholder="please select your zone"  style="height: 40px;width: 100px;text-align: center;">
        <el-option label="请选择" :value="0" />
        <el-option label="自制" :value="1" />
        <el-option label="委外" :value="2" />
      </el-select>   
                    </td>
                    <td>
                            <el-select v-model="item.iProcess" placeholder="选择流程"  style="height: 40px;width: 100px;text-align: center;">
        <el-option label="请选择" value="0" />
        <el-option label="汽车生产工艺流程" value="汽车生产工艺流程" />
        <el-option label="电脑工艺流程" value="电脑工艺流程" />
        <el-option label="面包饼干工艺流程" value="面包饼干工艺流程" />
      </el-select>  
                    </td>
                    <td><input v-model="item.iWearRate" type="text"
                            style="height: 40px;width: 100px;text-align: center;" />
                    </td>
                  
                    <td>
                        <el-select v-model="item.iPickingMethod" placeholder="选择方式"  style="height: 40px;width: 100px;text-align: center;">
        <el-option label="请选择" value="0" />
        <el-option label="正常领料" value="正常领料" />
        <el-option label="斜冲领料" value="斜冲领料" />
      </el-select>  
                    </td>
                    <td><input v-model="item.imRemark" type="text"
                            style="height: 40px;width: 100px;text-align: center;" />
                    </td>
                </tr>
            </tbody>
        </table>
    <el-form-item >
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
</el-form>  





</template>
<script setup lang='ts'>
import http from '../../../http.js'
import {ref,onMounted,reactive} from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()
const ruleFormRef = ref<FormInstance>();
const dialogVisible3 = ref(false)//双击产品名称弹出层
const dialogVisible4 = ref(false)//双击产品名称弹出层
var i= Math.floor(1000 + Math.random() * 9000);
const form = reactive({
    addDtos: {
        materialNode:i,
        mSubject:"",
        mNumber:i.toString(),
        mWatchmakers:"",
        mRemark:"",
        mpName:"",
        mpNumber:"",
        mpSpec:"",
        mpUnit:"",
        mQuantity:0,
        mProductPersonas:0,
        mProcess:"",
        mWearRate:0,
        itemSubpiecesList:[{
    productId:0,
    iNumber:i,
    iProductPersonas:"",
    pNumber:"",
    pName:"",
    pSpec:"",
    pUnit:"",
    productRatio:"",
    iProcess:"",
    iWearRate:"",
    iPickingMethod:"",
    materialNode:i,
    imRemark:""
}],
    }
   
})
onMounted(() => {
    ProductList();  //显示产品列表
    getVendorType()
})


const formInline = reactive({
    PageIndex: 1,
    PageSize: 5,
    pageLast: 0,
    sumCount:0,
    PName: '',//产品名称
    PNumber: '',//产品编号
    Office_Id: '1',//公司id
    ProductTypeId:'',//产品类型id
})
//获取产品列表
const tableData=ref([])
const ProductList = () => {
    axios.get(http.zblnb+'/erpcp/api/Product/ProductShow', {
        params: {
            PageIndex: formInline.PageIndex,
            PageSize: formInline.PageSize,
            PName: formInline.PName,
            PNumber: formInline.PNumber,
            Office_Id: formInline.Office_Id,
            ProductTypeId:formInline.ProductTypeId ||0 
        }
    })
    .then(res => {
        // console.log(res)
        tableData.value = res.data.data.list
        formInline.pageLast = res.data.data.pageLast
        formInline.sumCount = res.data.data.sumCount
    })
    .catch(err => {
        console.log(err)    
    })
}
const check1 = ref([])
const handleSelectionChange1 = (val: any) => {  
    check1.value = val;  
    console.log(check1.value);  
};  
//点击新增行
const addhang = () => {
    check1.value.push({
   // productId:0,
    iNumber:0,
    iProductPersonas:0,
    pNumber:"",
    pName:"",
    pSpec:"",
    pUnit:"",
    productRatio:"",
    iProcess:"",
    iWearRate:0,
    iPickingMethod:"",
   // materialNode:1,
    imRemark:""
    });
}


const defaultProps = {
    children: 'children',
    label: 'label',
}
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb+'/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}
//全选
const ids: any = ref([])
const selectAll = ref(false)
const toggleSelectAll = () => {
    ids.value = []
    if (selectAll.value) {
        ids.value = check1.value.map(ele => ele.productId)
    }
}
const currentRow = ref()
//单选
const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val
  console.log(currentRow.value)
  form.addDtos.mpName=currentRow.value.pName
  form.addDtos.mpNumber=currentRow.value.pNumber
  form.addDtos.mpSpec=currentRow.value.pSpec
  form.addDtos.mpUnit=currentRow.value.pUnit


}

const onSubmit=()=>{
  // 清空现有的子件（如有必要）  
  form.addDtos.itemSubpiecesList = [];  

check1.value.forEach(item => {  
    console.log(item.productId);  
    const newItem = {  
        productId: item.productId,  
        iNumber: i,  // 确保 `i` 已定义  
        iProductPersonas: item.iProductPersonas || "",  
        pNumber: item.pNumber || "",  
        pName: item.pName || "",     
        pSpec: item.pSpec || "",  
        pUnit: item.pUnit || "",  
        productRatio: item.productRatio || "",  
        iProcess: item.iProcess || "",  
        iWearRate: item.iWearRate || 0,  
        iPickingMethod: item.iPickingMethod || "",  
        materialNode: i,  
        imRemark: item.imRemark || ""  

    };  

    console.log(newItem); // 调试步骤  
    if (newItem.productId != 0) {  
        form.addDtos.itemSubpiecesList.push(newItem);  
    }  
});  
  
   axios.post(http.zblnb+'/sc/api/Material/MaterialAdd', {
        addDtos:form.addDtos
    }).then(response => {
   
    console.log(response.data)
    if(response.data.code==200)
    {
        ElMessage({
            message: '添加成功',
            type: 'success',
            
        })
        router.push('MaterialShow')
    }
    else
    {
        ElMessage({
            message: '添加失败',
            type: 'error',
        })
    }


})




    console.log(form.addDtos)
}



</script>
<style>  
table {  
    width: 100%; /* 可选：设置表格宽度 */  
    border-collapse: collapse; /* 防止单元格之间的间隔 */  
}  
td {  
    text-align: center; /* 水平居中 */  
    vertical-align: middle; /* 垂直居中 */  
    border: 1px solid #ddd; /* 添加边框用于可视化 */  
    padding: 10px; /* 单元格内边距 */  
}  
</style> 